<template>
  <div class="photographer">
    <div class="topic">
      <div class="ulbox">
        <router-link to="/photographer">
          <li>推荐摄影师</li>
        </router-link>
        <router-link to="/photographer/hot">
          <li>热门摄影师</li>
        </router-link>
        <router-link to="/photographer/new">
          <li>新晋摄影师</li>
        </router-link>
        <router-link to="/photographer/creator">
          <li>签约摄影师</li>
        </router-link>
      </div>
      <div class="title">
        <el-dropdown>
          <span class="el-dropdown-link">
            个人&公司<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人&公司</el-dropdown-item>
            <el-dropdown-item>个人</el-dropdown-item>
            <el-dropdown-item>公司</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <div class="contentItem" v-for="(item) in data" :key="item.id">
        <div class="baseinfo">
          <div class="leftimg">
            <a href="#" class="headpic">
              <!-- <img src="../../image/s1.png" alt="" /> -->
              <img :src="item.img" alt="">
            </a>
          </div>
          <div class="righttext">
            <div class="righttexttop">
              <span>DJI大疆创新</span>
              <div class="_3BJK">
                <div class="wqaX">
                  <span class="icon flag-icon flag-icon-cn lq41">00</span>
                </div>
                <div class="wqaX _2OLD sQis">
                  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none" fill-rule="evenodd">
                      <path d="M8 0C3.583 0 0 3.583 0 8s3.583 8 8 8 8-3.583 8-8-3.583-8-8-8z"
                        fill="#FFCA44" fill-rule="nonzero"></path>
                      <path
                        d="M10.861 8.361c-.167.445-.361.861-.528 1.278-.166.417-.333.805-.5 1.139-.139.333-.25.61-.333.833-.111.278-.167.361-.167.389-.027.083-.11.167-.166.25-.084.111-.167.167-.278.25-.111.083-.222.167-.389.194a1.503 1.503 0 0 1-.528.084c-.166 0-.36-.028-.5-.111-.166-.056-.25-.14-.36-.223-.112-.11-.168-.166-.25-.277-.056-.111-.112-.167-.14-.223 0-.027-.055-.11-.11-.25-.056-.166-.14-.333-.195-.527-.056-.195-.167-.473-.25-.75-.084-.278-.195-.528-.306-.834-.222-.666-.528-1.416-.833-2.25-.111-.25-.167-.472-.278-.61-.083-.167-.167-.223-.278-.306a.455.455 0 0 0-.333-.056 3.455 3.455 0 0 0-.445.111 1.141 1.141 0 0 1 0-.61c.056-.168.14-.362.223-.529a1.22 1.22 0 0 1 .444-.389c.167-.11.389-.166.611-.222.445-.11.834-.11 1.14.056.305.166.527.416.638.75.028.11.111.305.222.61.111.306.25.668.417 1.084.167.417.305.861.5 1.334.167.5.361.944.528 1.416l1.916-4.5c.111-.194.25-.36.473-.444a2.93 2.93 0 0 1 .666-.167c.25-.028.528-.028.834.028-.528 1.278-1.028 2.444-1.445 3.472z"
                        fill="#FFF"></path>
                    </g>
                  </svg>11
                </div>
                <div class="wqaX _2OLD sQis">
                  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none" fill-rule="evenodd">
                      <circle fill="#3CA6F5" cx="8" cy="8" r="8"></circle>
                      <path
                        d="M10.251 4c.709 0 1.288.142 1.74.427.45.285.676.691.676 1.219v5.896h-.532c-.386-.584-1.014-.875-1.884-.875-.483 0-.91.128-1.28.385s-.604.573-.7.948h-.049V4.646c.403-.43 1.08-.646 2.03-.646zM5.749 4c-.709 0-1.288.142-1.74.427-.45.285-.676.691-.676 1.219v5.896h.532c.386-.584 1.014-.875 1.884-.875.483 0 .91.128 1.28.385s.604.573.7.948h.049V4.646C7.375 4.216 6.698 4 5.748 4z"
                        fill="#FFF"></path>
                    </g>
                  </svg>11
                </div>
              </div>
            </div>
            <div class="country">
              <div class="guojia">{{item.country}}</div>
              <span>{{item.prestige}}声望</span>
              <span>{{item.fans}}粉丝</span>
              <span>{{item.works}}作品</span>
            </div>
          </div>
        </div>
        <div class="imginfo">
          <img src="../../image/s11.png" alt="">
          <img src="../../image/s12.png" alt="">
          <img src="../../image/s13.png" alt="">
        </div>
      </div>
    </div>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  components: {
    // Nav: () => import("../../components/Nav.vue"),
  },
  props: {},
  data() {
    return {
      type: 'recommend',
      data: [],
    };
  },
  watch: {},
  computed: {},
  mounted() {
    window.scrollTo(0, 0);
    this.mounted()
  },
  methods: {
    async mounted() {
      let res = await this.$axios.get(`/api/photographer?type=recommend`)
      this.data = res.data
      console.log(res, 11111, this.data)
    }
  },
  created() { },

};
</script>
<style  scoped lang="scss">
.topic {
  /* position: fixed; */
  top: 3rem;
  left: 0;
  right: 0;
  z-index: 99;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%);
}
.topic .ulbox {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 50px;
}
.topic .ulbox li {
  height: 3rem;
  box-sizing: border-box;
  margin: 0 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 0.15rem solid transparent;
  border-top: 0.15rem solid transparent;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.title {
  height: 40px;
  background-color: #f7f9fa;
  line-height: 40px;
  margin-left: -1000px;
  cursor: pointer;
}
.content {
  height: 2000px;
  .contentItem {
    height: 200px;
    width: 1200px;
    // background-color: red;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    .baseinfo {
      width: 600px;
      height: 130px;
      align-items: center;
      display: flex;
      justify-content: flex-start;
      .leftimg {
        height: 130px;
        width: 96px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .righttext {
        width: 375px;
        height: 130px;
        //国家旗子标识
        .righttexttop {
          width: 375px;
          height: 24px;
          display: flex;
          line-height: 40px;
          span {
            color: rgba(0, 0, 0, 0.85);
            cursor: pointer;
            // line-height: 40px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 600;
            margin-right: 0.2rem;
            max-width: 38rem;
          }
          ._3BJK {
            display: flex;
            width: 36px;
            .wqaX {
              width: 60px;
              height: 16px;
              color: rgb(0 0 0 /0%);
              .flag-icon-cn {
                width: 16px;
                height: 16px;
                color: rgb(0 0 0 /0%);
                background-image: url(https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/files/cn.02c229de.svg);
              }
            }
          }
        }
        .country {
          margin-left: -200px;
          margin-top: 10px;
          .guojia {
            margin-left: -100px;
          }
        }
      }
    }
    .imginfo {
      height: 200px;
      width: 600px;
      display: flex;
      justify-content: space-between;
      img {
        width: 150px;
        height: 150px;
      }
    }
  }
}
</style>